<template>
  <div>
    <div class="table-row display-fx-center">
      <div class="tr display-fx-center">
        <div class="td">
          <span class="must">*</span>
          <span>申报类型：</span>
        </div>
        <div class="full" style="border-right: none">
          {{ infoData.reportType }}
        </div>
      </div>
      <div class="tr display-fx-center">
        <div class="td">
          <span class="must">*</span>
          <span>申报年份</span>
        </div>
        <div class="full">
          {{ infoData.reportYear }}
        </div>
      </div>
    </div>
    <div class="table-row display-fx-center">
      <div class="tr display-fx-center">
        <div class="td">
          <span class="must">*</span>
          <span>单位名称</span>
        </div>
        <div class="full" style="border-right: none">
          {{ infoData.enterpriseName }}
        </div>
      </div>

      <div class="tr display-fx-center">
        <div class="td">
          <span class="must">*</span>
          <span>统一社会信用代码</span>
        </div>
        <div class="full">{{ infoData.creditCode }}</div>
      </div>
    </div>

    <div class="table-row display-fx-center">
      <div class="tr display-fx-center">
        <div class="td">
          <span class="must">*</span>
          <span>单位注册地址</span>
        </div>
        <div class="full" style="border-right: none">
          {{ infoData.enterpriseRegisterAddress }}
        </div>
      </div>

      <div class="tr display-fx-center">
        <div class="td">
          <span class="must">*</span>
          <span>作业场所地址</span>
        </div>
        <div class="full">{{ infoData.enterpriseWorkAddress }}</div>
      </div>
    </div>
    <div class="table-row display-fx-center">
      <div class="tr display-fx-center">
        <div class="td">
          <span class="must">*</span>
          <span>企业规模</span>
        </div>
        <div class="full" style="border-right: none">
          {{ infoData.enterpriseSize }}
        </div>
      </div>
      <div class="tr display-fx-center">
        <div class="td">
          <span class="must">*</span>
          <span>经济类型</span>
        </div>
        <div class="full" style="border-right: none">
          {{ infoData.conomicType }}
        </div>
      </div>
      <div class="tr display-fx-cente">
        <div class="td">
          <span class="must">*</span>
          <span>行业分类</span>
        </div>
        <div class="full">
          {{ infoData.industryType }}
        </div>
      </div>
    </div>

    <div class="table-row display-fx-center">
      <div class="tr display-fx-center">
        <div class="td">
          <span class="must">*</span>
          <span>填报人</span>
        </div>
        <div class="full" style="border-right: none">
          {{ infoData.reporterName }}
        </div>
      </div>

      <div class="tr display-fx-center">
        <div class="td">
          <span class="must">*</span>
          <span>手机号码或座机</span>
        </div>
        <div class="full">{{ infoData.reporterNumber }}</div>
      </div>
    </div>

    <div class="table-row display-fx-center">
      <div class="tr display-fx-center">
        <div class="td">
          <span class="must">*</span>
          <span>法定代表人</span>
        </div>
        <div class="full" style="border-right: none">
          {{ infoData.legalPerson }}
        </div>
      </div>

      <div class="tr display-fx-center">
        <div class="td">
          <span class="must">*</span>
          <span>手机号码或座机:</span>
        </div>
        <div class="full">{{ infoData.legalPersonNumber }}</div>
      </div>
    </div>
    <div class="table-row display-fx-center">
      <div class="tr display-fx-center">
        <div class="td">
          <span class="must">*</span>
          <span>职业卫生管理联系人</span>
        </div>
        <div class="full" style="border-right: none">
          {{ infoData.zywsManagerName }}
        </div>
      </div>

      <div class="tr display-fx-center">
        <div class="td">
          <span class="must">*</span>
          <span>手机号码</span>
        </div>
        <div class="full">{{ infoData.zywsManagerNumber }}</div>
      </div>
    </div>
    <div class="table-row display-fx-center">
      <div class="tr display-fx-center">
        <div class="td">
          <span class="must">*</span>
          <span>本单位在册职工总数</span>
        </div>
        <div class="full" style="border-right: none">
          {{ infoData.enterpriseRegisterPersonnelNum }}
        </div>
      </div>

      <div class="tr display-fx-center">
        <div class="td">
          <span class="must">*</span>
          <span>外委人员总数</span>
        </div>
        <div class="full">{{ infoData.enterpriseOutPersonnelNum }}</div>
      </div>
    </div>
    <div class="table-row display-fx-center">
      <div class="tr display-fx-center">
        <div class="td">
          <span class="must">*</span>
          <span>接害总人数(含外委)</span>
        </div>
        <div class="full" style="border-right: none">
          {{ infoData.contactHazardPersonnelNum }}
        </div>
      </div>

      <div class="tr display-fx-center">
        <div class="td">
          <span class="must">*</span>
          <span>职业病累计人数</span>
        </div>
        <div class="full">{{ infoData.occupationalPersonnelNum }}</div>
      </div>
    </div>
    <div class="table-row display-fx-center">
      <div class="tr display-fx-center" style="width: 321px">
        <div class="td">
          <span class="must">*</span>
          <span>主要负责人培训</span>
        </div>
        <div class="full" style="border-right: none">
          {{ infoData.blnEnterpriseManagerTrained }}
        </div>
      </div>

      <div class="tr display-fx-center" style="width: 321px">
        <div class="td" style="width: 177px">
          <span class="must">*</span>
          <span>职业卫生管理人员培训</span>
        </div>
        <div class="full" style="border-right: none">
          {{ infoData.blnZywsManagerTrained }}
        </div>
      </div>
      <div class="tr display-fx-cente">
        <div class="td" style="width: 251px">
          <span class="must">*</span>
          <span>接触职业病危害因素年度培训总人数</span>
        </div>
        <div class="full">{{ infoData.annualTrainedPersonnelNum }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      basicInfo: {},
    };
  },
  props: {
    infoData: {
      type: Object,
      default: () => {},
    },
  },
  // 当需要拿infoData里面的数据区请求接口的时候，可以先用watch监听
  //  watch:{
  //    infoData: {
  //    handler(val) {
  //           if(val){
  //               this.basicInfo = this.infoData
  //           }
  //       },
  //       deep: true
  //    },
  //  },
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.display-fx-center {
  display: flex;
  align-items: center;
}
.per88 {
  width: 88% !important;
}
.per70 {
  width: 70% !important;
}

.table-row {
  font-size: 14px;
  .tr {
    width: 50%;
    height: 60px;
    display: flex;
    .td {
      text-align: right;
      width: 161px;
      height: 100%;
      border: solid 1px #dfe6ec;
      color: #797c84;
      background-color: #f4f8ff;
      border-top: none;
      border-right: none;
      padding: 8px;
      flex-shrink: 0;
      @extend .display-fx-center;
      .must {
        color: #ff0f0f;
        margin-right: 2px;
      }
    }
    .full {
      width: 100%;
      height: 100%;
      line-height: 37px;
      border: solid 1px #dfe6ec;
      border-top: none;
      //  border-right:none;
      padding: 0 10px;
      @extend .display-fx-center;
    }
  }
}
</style>
